<template>
  <div class="ZYF-Abnormal">
    <h3 class="h3">处理记录</h3>
    <div class="deviceinfo-from">
      <a-form-model layout="inline" :model="page" :colon="false">
        <a-form-model-item label="排口名称" :label-col="{span: 6}" :wrapper-col="{span: 16}">
          <a-tree-select treeNodeFilterProp="title" showSearch :treeDefaultExpandAll="true" v-model="page.monitorId" :tree-data="TreeData" :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}" :replaceFields="{title:'name',key:'id',value:'id',children:'equipmentInfos'}" allowClear placeholder="请选择排口" />
        </a-form-model-item>
        <a-form-model-item label="监测类型" :label-col="{span: 6}" :wrapper-col="{span: 16}">
          <a-input v-model="page.monitorFactorsName" placeholder="请输入要查找的监测类型" allow-clear />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="onSubmit">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="tableclass">
      <my-table
        style="height: 98%"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data-source="TableData"
        :pagination="false"
      >
        <span slot="photosList" slot-scope="photosList" class="solve-img">
          <div v-viewer>
            <img
              class="byimg"
              v-for="(img, indexs) in photosList"
              data-first-index="0"
              :data-secondIndex="indexs"
              :key="indexs"
              :src="img.imageUrl"
              alt
            />
          </div>
        </span>
      </my-table>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination
            :show-total="(total) => `共 ${total} 条记录`"
            v-model="page.current"
            :total="total"
            :defaultPageSize="page.size"
            :item-render="itemRender"
            @change="pagechangeFn"
            hideOnSinglePage
          />
        </div>
      </div>
    </div>
    <chart-pop ref="ChartPop" :chartData="chartData"></chart-pop>
    <!-- 图表弹框 -->
    <echartesPop ref="echartsRef" :monitorData="monitorData"></echartesPop>
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
import moment from "moment";
import "moment/locale/zh-cn";
import echartesPop from "@/views/air/components/echartesPop";
import ChartPop from "@/views/air/components/chartPop";
export default {
  components: {
    echartesPop,
    ChartPop,
  },
  data() {
    return {
      TreeData: [],
      equipmentTypeId: "1",
      // 设备表格字段
      columns: [
        {
          title: "序号",
          // dataIndex: "i",
          align: "center",
          width: "80px",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "区域名称",
          dataIndex: "areaName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "企业名称",
          dataIndex: "companyName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "站点名称",
          dataIndex: "monitorName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "报警名称",
          dataIndex: "lastMonitorWarningName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "预警值",
          dataIndex: "lastValue",
          align: "center",
          ellipsis: true,
        },
        {
          title: "监测因子名称",
          dataIndex: "monitorFactorsName",
          align: "center",
          ellipsis: true,
        },
        {
          title: "报警时间",
          dataIndex: "modifyTime",
          align: "center",
          ellipsis: true,
          width: "200px",
        },
        {
          title: "图片",
          dataIndex: "photosList",
          scopedSlots: {
            customRender: "photosList",
          },
          align: "center",
        },
        // {
        //     title: "处理状态",
        //     dataIndex: "status",
        //     align: "center",
        //     ellipsis: true,
        // },
        {
          title: "异常次数",
          dataIndex: "hits",
          align: "center",
          ellipsis: true,
        },
        // {
        //     title: "其他信息",
        //     scopedSlots: {
        //         customRender: "operate",
        //     },
        //     align: "center",
        //     width: "140px",
        // },
      ],
      TableData: [], // 分页表格数据
      // 设备信息分页查询
      page: {
        current: 1,
        size: 10,
        status: false,
        monitorId: undefined,
        monitorFactorsName: "",
        isWarning:false
      },
      total: 0, // 设备总条数
      chartData: {},
      monitorData: [], // 图表弹窗警告类型数组
      photosList: [],
    };
  },
  methods: {
    // 搜索查询
    onSubmit() {
      this.page.current = 1;
      this.getdata();
    },

    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page) {
      this.page.current = page;
      this.getdata();
    },

    getdata() {

      this.$api.MonitorStationAbnormalData(this.page).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.TableData = res.data.data;
           var result = res.data.data;
          var showfile = require("@/assets/public/影像资料.png");
          result.forEach((v) => {
            v.createTime = moment(parseInt(v.createTime)).format(
              "YYYY/MM/DD HH:mm:ss"
            );
            v.modifyTime = moment(parseInt(v.modifyTime)).format(
              "YYYY/MM/DD HH:mm:ss"
            );
          });
          this.total = res.data.total;
          for (let index in result) {
            let itemFirst = result[index].photosList;
            for (let key in itemFirst) {
              result[index].photosList[
                key
              ].showfile = showfile;
            }
          }
        } else {
          this.$message.warning(res.data.errorMessage);
        }

      });
    },
  },
  created() {
    // 获取设备下拉数据
    this.$api.getFindMonitorInfoByUserId().then((res) => {
      if (res.data.code == 0) {
        res.data.data.forEach((v) => {
          v.selectable = false

        });
        this.TreeData = res.data.data;
        console.log(this.TreeData);
        this.dataLoading3 = true;
      } else {
        this.$message.info(res.data.errorMessage);
      }
    });
  },
  mounted() {
    this.getdata();
  },
};
</script>

<style lang="scss" scoped>

::v-deep .solve-img img {
  width: 30px;
  height: 25px;
  margin-right: 5px;
}
.solve-img {
  display: inline-block;
  justify-content: space-evenly;
}
.ZYF-Abnormal {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .deviceinfo-from {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
  }

  .tableclass {
    width: 100%;
    height: 86%;
  }

  .content-bottom {
    margin-top: 10px;
    width: 100%;
  }

  .page-box {
    float: right;
  }
}

.Yellclass {
  color: springgreen;
}
.sousuobtn {
  background-color: #189580;
  border-color: #189580;
  padding: 0 10px;
}

/* 表单样式 */
::v-deep.ZYF-Abnormal .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ZYF-Abnormal .deviceinfo-from .ant-form-item {
  width: 300px;
}
::v-deep.ZYF-Abnormal .deviceinfo-from .ant-form {
  width: 80%;
  display: flex;
}


</style>
